<template>
  <el-container>
    <!-- 顶部 -->
    <el-header height="64px">
      <Header></Header>
    </el-header>
    <!-- 中间区 -->
    <el-main>
      <el-container>
        <!-- 左侧导航 -->
        <el-aside style="width:200px; height:633px">
          <Side></Side>
        </el-aside>
        <!-- 右侧内容展示 -->
        <el-main class="bg">
          <component :is="html"></component>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import Header from "./components/Header";
import Side from "./components/Side";
import Home from "./views/Home";
import vue from "./views/vuedocs/Index";
import Zhiling from "@/components/12-16element/views/vuedocs/Zhiling";
export default {
  components: { Header, Side, Home, vue, Zhiling },
  data() {
    const path = window.location.hash.replace(/\#/, "");
    return {
      html: path || "Home",
    };
  },
  mounted() {
    //页面打开时挂载一个监听hash变化的函数
    window.onhashchange = () => {
      this.html = window.location.hash.replace(/\#/, "");
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  width: 100%;
  height: 694px;
  background: url("./bg.jpg") no-repeat;
  background-size: 100% 100%;
}
.el-container > .bg {
  width: 100%;
  height: 100%;
}
.el-container .el-main {
  margin: 0;
  padding: 0;
}
.el-container .el-col {
  width: 100%;
}
.el-container .el-header {
  background: cadetblue;
}
</style>
